///////////////////////////////////////// 商品类型接口////////////////////////////////////////////////
$(function(){
    shufflingFigure();
    getLeixing()
    getGoods()
})


function getLeixing(){
    $.get("../goodsAndShoppingCart/getGoodsList.php",function(data){
        data.forEach(function(item,index){
            $(".h2>span").eq(index).html(item.goodsType)
        })
    },"json")
}


//------------------商品接口----------------------------

function  getGoods(){
    $.get("../goodsAndShoppingCart/getGoodsList.php",{"typeId":"001"},function(data){
        data=JSON.parse(data)
        console.log(data);
        let str = '';
        data.forEach(function(item,index){
        str+=`
        <ul class="ul3" id="ul13">
            <li>
                <a href="javascript:;">
                    <img src="${item.goodsImg}" alt="">
                    <p>${item.goodsDesc}</p>
                    <b>${item.goodsName}</b>
                    <i style=""></i>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="${item.goodsImg}" alt="">
                    <p>${item.goodsDesc}</p>
                    <b>${item.goodsName}</b>
                    <i style=""></i>
                </a>
            </li> 
            <li>
                <a href="javascript:;">
                    <img src="${item.goodsImg}" alt="">
                    <p>${item.goodsDesc}</p>
                    <b>${item.goodsName}</b>
                    <i style=""></i>
                </a>
            </li> 
            <li>
                <a href="javascript:;">
                    <img src="${item.goodsImg}" alt="">
                    <p>${item.goodsDesc}</p>
                    <b>${item.goodsName}</b>
                    <i style=""></i>
                </a>
            </li>      
        </ul>
        `
        $("#qiehuan").html(str)
        })
    }
)}









//////////////////////////////轮播图接口///////////////////////////////////////////
function shufflingFigure() {
    $.ajax({
        url: "../goodsAndShoppingCart/bannerGet.php",
        success: function (data) {
            data = JSON.parse(data);
            data.map((item, index) => {
                $('#box .screen ul li a').eq(index).prop('href', item.url);
                $('#box .screen ul li a img').eq(index).prop('src', item.img);
            })
        }
    })
}





let one = [
    {
        tat: "新闻",
        tbt: "快手星之守护者狂欢季",
        tct: "07-16",
        tdt:"星之守护者MV幕后故事"
    },
]
let oneDom = document.getElementById("subnav")
let oneStr = ``
for (let i = 0; i < one.length; i++) {
    oneStr += `
    <li class="li1">${one[i].tdt}</li>
    <li>
        <span class="span1">
            <p>${one[i].tat}</p><a href="javascript:;">${one[i].tbt}</a>
        </span>
        <span class="span2">${one[i].tct}</span>
    </li>
    <li>
        <span class="span1">
            <p>${one[i].tat}</p><a href="javascript:;">${one[i].tbt}</a>
        </span>
        <span class="span2">${one[i].tct}</span>
    </li>
    <li>
        <span class="span1">
            <p>${one[i].tat}</p><a href="javascript:;">${one[i].tbt}</a>
        </span>
        <span class="span2">${one[i].tct}</span>
    </li>
    <li>
        <span class="span1">
            <p>${one[i].tat}</p><a href="javascript:;">${one[i].tbt}</a>
        </span>
        <span class="span2">${one[i].tct}</span>
    </li>
    <li>
        <span class="span1">
            <p>${one[i].tat}</p><a href="javascript:;">${one[i].tbt}</a>
        </span>
        <span class="span2">${one[i].tct}</span>
    </li>
    <li>
        <span class="span1">
            <p>${one[i].tat}</p><a href="javascript:;">${one[i].tbt}</a>
        </span>
        <span class="span2">${one[i].tct}</span>
    </li>
    `
}
oneDom.innerHTML = oneStr;




let three = [
    {
        tat:"峡谷之巅"
    }
]


let threeDom =document.getElementById("ul14")
let threeStr = ``;
for (let i = 0; i < three.length; i++) {
    threeStr += `
    <li>
        <a href="javascript:;">
            <p></p>
            <b>${three[i].tat}</b>
        </a>
    </li>
    <li>
        <a href="javascript:;">
            <p></p>
            <b>${three[i].tat}</b>
        </a>
    </li>
    <li>
        <a href="javascript:;">
            <p></p>
            <b>${three[i].tat}</b>
        </a>
    </li>
    <li>
        <a href="javascript:;">
            <p></p>
            <b>${three[i].tat}</b>
        </a>
    </li>
    <li>
        <a href="javascript:;">
            <p></p>
            <b>${three[i].tat}</b>
        </a>
    </li>
    <li>
        <a href="javascript:;">
            <p></p>
            <b>${three[i].tat}</b>
        </a>
    </li>
    <li>
        <a href="javascript:;">
            <p></p>
            <b>${three[i].tat}</b>
        </a>
    </li>
    <li>
        <a href="javascript:;">
            <p></p>
            <b>${three[i].tat}</b>
        </a>
    </li>
    `
}
threeDom.innerHTML = threeStr;






































$(window).on("scroll", function () {
    if ($(window).scrollTop() > 100) {
        $(".xia").animate({ "margin-left": "-59.5px", "margin-top": "78px" }, 1000)
        $(".xiayou").animate({ "margin-top": "132px" }, 1000)
        $(".daohang").animate({
            height: 360
        }, 1000)
        $(".daohang>.beijingtu").animate({
            height: 360
        }, 1000)
        $(".daohang>.beijingtu").prop("src", "../imges/indeximg/two.jpg")
        $(".one").animate({
            height: 1192
        }, 1000)
        $(window).off("scroll")
    }

})

$(".ul20>li").mouseover(function () {
    $(".theDrop-downMenu").slideDown(500);
    $(".ul20>li").off("scroll")
})
$(".theDrop-downMenu").mouseout(function () {
    $(".theDrop-downMenu").slideUp(500);
})





// 轮播图

function cloneLi() {
    $(".one>#box>.screen>ul").append($(".one>#box>.screen>ul>li").eq(0).clone())
}
cloneLi()
let index = 0;
let timer = null;
$("ol>li").on("click", function () {
    if (index >= 5) {
        $(".one>#box>.screen>ul").css("left", 0);
        index = 0;
    }
    index++;
    $(".one>#box>.screen>ul").animate({ left: -index * $(".screen").width() })
    if (index == 5) {
        $("ol>li").eq(0).addClass("current").siblings("li").removeClass("current")
    } else {
        $("ol>li").eq(index).addClass("current").siblings("li").removeClass("current")
    }
})


function autoplay() {
    clearInterval(timer)
    timer = setInterval(function () {
        $("ol>li").triggerHandler("click")
    }, 2000)
}
autoplay();


$("ol>li").hover(function () {
    clearInterval(timer)
    let index = $(this).index("ol>li")
    $(".one>#box>.screen>ul").animate({ left: -index * $(".screen").width() })
    $("ol>li").eq(index).addClass("current").siblings("li").removeClass("current")
}, function () {
    autoplay();
})


$("#ul1>li").hover(function () {
    $(this).addClass("active").siblings().removeClass("active");
    let index = $(this).index("#ul1>li");
    $("#topright").children().eq(index).addClass("subnav").siblings().removeClass("subnav")
});




$("#topright>ul>.li1").hover(function () {
    $(".li1").css("color", "#e9852d")
}, function () {
    $(".li1").css("color", "#16ADBA")
})


$("#ul2>li").hover(function () {
    $(this).addClass("asst").siblings().removeClass("asst");
    let index = $(this).index("#ul2>li");
    $("#qiehuan").children().eq(index).addClass("ul3").siblings().removeClass("ul3")
    $(".ul3>li").hover(function () {
        $(this).children().children("p").css("color", "#1da6ba")
    }, function () {
        $(".ul3>li").children().children("p").css("color", "#424242")
    })
});


$(".ul3>li").hover(function () {
    $(this).children().children("b").css("color", "#1da6ba")
}, function () {
    $(this).children().children("b").css("color", "#424242")
})

$(".ul4>li").hover(function () {
    $(this).addClass("li4").siblings().removeClass("li4");
    let index = $(this).index(".ul4>li");
    $(".ul6").children().eq(index).addClass("cao").siblings().removeClass("cao")
});


$(".ul8>li").on("click", function () {
    $(this).addClass("li8").siblings().removeClass("li8");
    let index = $(this).index(".ul8>li");
    $(".threebottom").children().eq(index).addClass("ul9").siblings().removeClass("ul9")
});

$(".a10").on("click", function () {
    $("html,body").animate({  // 让body和html回到顶部
        scrollTop: 720
    }, 500)
    $(window).off("scroll")
})

$(".a12").on("click", function () {
    $("html,body").animate({  // 让body和html回到顶部
        scrollTop: 1600
    }, 500)
    $(window).off("scroll")
})

$(".a13").on("click", function () {
    $("html,body").animate({  // 让body和html回到顶部
        scrollTop: 2600
    }, 500)
})

$(".a14").on("click", function () {
    $("html,body").animate({  // 让body和html回到顶部
        scrollTop: 0
    }, 500)
    $(window).off("scroll")
})



// -------------------------------------------------------------------------------------------------




// 功能：设置cookie
// 参数：键，值，有效时长（天数）
function setCookie(key, value, date) {
    let d = new Date();
    d.setDate(d.getDate() + date);
    document.cookie = `${key}=${value};expires=${d};path=/`;
}

// 功能：删除cookie
// 参数：删除的键名
function removeCookie(key) {
    setCookie(key, 'beybey', -1);
}

// 功能：获取指定键的cookie
// 参数：键名
function getCookie(key) {
    let cookieStr = document.cookie;
    let initArr = cookieStr.split('; ');
    for (let i in initArr) {
        if (initArr[i].startsWith(key + '=')) {
            return initArr[i].split('=')[1];
        }
    }
}

// 判断是否是第一次登陆
function isFirstLogin() {
    let cookie = getCookie('username');
    if (cookie) {
        $('.topyou1').css("display","block").html(`
                    <a class="topyoutu" href="javascript:;">
                        <img src="../imges/indeximg/yx/Lillia.png" alt="javascript:;">
                    </a>
                    <b class="mingzi"><a href="">${cookie}</a></b>
                    <p class="topyouzi"><a href="./index.html" target="_blank">退出</a></p>
        `);
        $(".topyou").css("display","none")
    }
}
isFirstLogin()
// 点击退出登录按钮退出登录并跳转
function logout() {
    $('.topyou1').on('click', '.topyouzi', function () {
        removeCookie('username');
        $(".topyou").css("display","block")
        location.reload(true);
    });
}
logout()
